<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  行：<input type="text" id="row"> 列：<input type="text" id="col">
  <button id="btn">生成</button>
  <table>
    <tbody id="mybody"></tbody>
  </table>
  <script>
    var btn = document.getElementById("btn")
    btn.onclick = function () {

      var mybody = document.getElementById("mybody")
      mybody.innerHTML = "" //清空上次添加的内容
      // 行数
      var rowVal = document.getElementById("row").value;
      for (var i = 0; i < rowVal; i++) {
        var tr = document.createElement("tr");
        // 生成列
        var colVal = document.getElementById("col").value;
        for (var j = 0; j < colVal; j++) {
          var td = document.createElement("td");
          td.innerHTML = Math.floor(Math.random() * 10);
          td.style.backgroundColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
          tr.appendChild(td)
        }
        mybody.appendChild(tr)
      }
    }




  </script>
</body>

</html>